<template>
	<view class="loginWrap">
		<view class="login">
			<view class="back" @click="getBack"><i class="iconfont icon-cha"></i></view>
			<view class="userIpt">
				<input type="text" class="usernameIpt" v-model="phoneNumber" placeholder="请输入手机号" placeholder-class="placeholderText"/>
				<input @confirm="login()" confirm-type="done" type="password" class="usernameIpt" v-model="password" placeholder="请输入密码" placeholder-class="placeholderText"/>
			</view>
			<view class="button">
				<button type="default" size="mini" @tap="login" open-type="getUserInfo">登陆</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '',
				password: ''
			}
		},
		methods: {
			getBack() {
				uni.switchTab({
					url: '../discovery/discovery'
				})
			},
			login() {
				let phoneNumberReg = /^1[3456789]\d{9}$/
				let passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
				if ( this.phoneNumber == "" || this.password == "") {
					uni.showToast({
						title: '手机号和密码不能为空',
						icon: 'none'
					})
				} else if (!(phoneNumberReg.test(this.phoneNumber)) || !(passwordReg.test(this.password))) {
					uni.showToast({
						title: '手机号或密码格式不正确',
						icon: 'none'
					})
				} else {
					this.$http.loginByPhoneNumber(this.phoneNumber, this.password)
				}
			}
		}
	}
</script>

<style>
.loginWrap {
	width: 100%;
	height: 100vh;
	background: url() no-repeat;
	background-size: cover;
	position: absolute;
}

.login {
	overflow: hidden;
	width: 100%;
	height: 100%;
	
}

.back {
	margin: 1rem;
	color: #eeeeee;
}

.userIpt {
	width: 70%;
	height: 15%;
	margin: 40% auto 0;
}

.usernameIpt {
	box-sizing: border-box;
	height: 2.5rem;
	border-radius: 20px;
	background-color: rgba(187, 187, 187, 0.164);
	padding-left: 20px;
	color: #dddddd;
	margin-bottom: .8rem;
	background: rgba(107, 106, 106, 0.38);
	backdrop-filter: blur(10px);
}

.iconfont {
	font-size: 20px;
}
.button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5%;
}
.button button {
	box-sizing: border-box;
	padding-left: 1.5rem;
	width: 40%;
	height: 2rem;
	letter-spacing: .5rem;
	text-align: center;
	background-color: rgba(255, 255, 255, .8);
}
.placeholderText {
	color: #cccccc;
	line-height: 1rem;
	text-align: center;
	margin-left: -10px;
	
}
</style>
